﻿<div class="code" style="width: 328px;">
    <select id="SelectedChildrenSequences" multiple="multiple" name="SelectedChildrenSequences" style="float:left; vertical-align:middle; width: 200px;">
        <option value="2419">1 /Help</option>
        <option value="2424">2 /Task/List</option>
        <option value="2425">3 css调整</option>
    </select>
    <div id="updown" style="float: left; font-size:14px; margin-left: 8px;">
            <a href="#" id="up"><img src="/Resource/image/sort_up.png" alt="up" width="8" height="12" />上移</a>
            <br />
            <a href="#" id="down"><img src="/Resource/image/sort_down.png" alt="down" width="8" height="12" />下移</a>
    </div>
    <div style="clear:both;"></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $containerHeight = $("#updown").parent().css("height");
        $("#updown").css("padding-top", (parseInt($containerHeight)/2-16)+"px");

        //TODO: still issue:
        //1. up and down will generate duplicated new line
        //2. generate mulitiple options when choosing multiple lines
        $("#up").click(function (event) {
            event.preventDefault();
            var $selected = $("#SelectedChildrenSequences option:selected");
            if ($selected.index() > 0) {
                $selected.prev().append("\n").before("<option value=" + $selected.val() + "> " + $selected.text() + "</option>");
                $selected.remove();
            }
        })
        $("#down").click(function (event) {
            event.preventDefault();
            var $selected = $("#SelectedChildrenSequences option:selected");
            var totalNumber = $("#SelectedChildrenSequences option").length;
            if ($selected.index() < totalNumber - 1) {
                $selected.next().append("\n").after("<option value=" + $selected.val() + "> " + $selected.text() + "</option>");
                $selected.remove();
            }
        })
        $("form").submit(function () {
            $('#SelectedChildrenSequences option').prop('selected', true);
        })
    })
</script>